<template>
  <view style="padding: 20px;">
    <view class="item">
      <view class="label">
        班级名称
      </view>
      <view class="value">
        <text>{{user.classesName}}</text>
        <uni-icons type="right" color="gray" size="16"></uni-icons>
      </view>
    </view>
    <view class="item">
      <view class="label">
        班主任
      </view>
      <view class="value">
        <text>{{classesInfo?.leader || '-'}}</text>
        <uni-icons type="right" color="gray" size="16"></uni-icons>
      </view>
    </view>
    <view class="item">
      <view class="label">
        班主任电话
      </view>
      <view class="value">
        <text>{{classesInfo?.phone || '-'}}</text>
        <uni-icons type="right" color="gray" size="16"></uni-icons>
      </view>
    </view>
    <view class="item">
      <view class="label">
        班主任邮箱
      </view>
      <view class="value">
        <text>{{classesInfo?.email || '-'}}</text>
        <uni-icons type="right" color="gray" size="16"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import classesApi from '@/api/class.js';
import { useUserStore } from '@/store/store.js';

const userStore = useUserStore();
const user = ref(userStore.userInfo);

const classList = ref([]);
// 修正classesInfo的定义
const classesInfo = ref(null);

onMounted(() => {
  // 在页面挂载时获取班级列表数据
  console.log('----Onload');
  classesApi.getClassList().then((res) => {
    console.log('班级列表数据：', res.data);
    const classData = res.data.map((item) => ({
      value: item.classesId,
      text: item.classesName,
      leader: item.leader,
      phone: item.phone,
      email: item.email
    }));
    classList.value = classData;
    // 根据班级名称过滤对应的班级信息
    const targetClassName = user.value?.classesName;
    if (targetClassName) {
      const filteredClass = classList.value.find((classItem) =>
        classItem.text === targetClassName
      );
      classesInfo.value = filteredClass;
	  console.log("classesInfo", classesInfo.value)
	  
    }
  }).catch((err) => {
    console.log('获取班级列表出错：', err);
  });
});
</script>

<style lang="scss">
.item {
  border-bottom: 1px solid #eeeeee;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333333;

.value {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    text {
      margin-left: 10px;
    }
  }
}
</style>